<template>
	<view>
		<view class="amount">
			<text>￥{{amount}}</text>
		</view>
		<view class="bill" v-for="(item, index) in calendarData" :key="index">
			<view class="calendar">
				<!-- 日历部分 -->
				<view class="calendar-header" style="background-color: #ea6d4f;">
					{{ getFormattedDate(item.dateRange) }}
				</view>
				<view class="calendar-content">
					{{ item.text }}
				</view>
			</view>
			<view class="data">
				<view>
					<view>收入</view>
					<view>支出</view>
					<view>结余</view>
				</view>
				<view>
					<view>￥{{ item.income }}</view>
					<view>￥{{ item.expense }}</view>
					<view style="color: #f7bd8b;">￥{{ item.balance }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const today = new Date();
			const firstDayOfWeek = new Date(today);
			const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
			const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);

			return {
				amount: '56,895,262,363.00',
				calendarData: [{
						dateRange: today,
						text: '今天',
						income: '258.00',
						expense: '222.00',
						balance: '36.00'
					},
					{
						dateRange: [firstDayOfWeek, today],
						text: '本周',
						income: '598,652.00',
						expense: '5,656.00',
						balance: '592,996.00'
					},
					{
						dateRange: [firstDayOfMonth, lastDayOfMonth],
						text: '本月',
						income: '4,985,626,528.00',
						expense: '9,596,226.00',
						balance: '476,030,302.00'
					}
				]
			};
		},
		methods: {
			getFormattedDate(dateRange) {
				if (Array.isArray(dateRange)) {
					const startDate = dateRange[0];
					const endDate = dateRange[1];
					const formattedStartDate = `${startDate.getMonth() + 1}.${startDate.getDate()}`;
					const formattedEndDate = `${endDate.getMonth() + 1}.${endDate.getDate()}`;
					return `${formattedStartDate}-${formattedEndDate}`;
				} else {
					const formattedDate = `${dateRange.getMonth() + 1}.${dateRange.getDate()}`;
					return formattedDate;
				}
			}
		}
	};
</script>

<style scoped>
	.amount {
		height: 50px;
		width: 100%;
		background-color: #ea6d4f;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.amount text {
		color: white;
		font-size: 20px;
		text-align: center;
	}

	.bill {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: auto;
		height: 100px;
		margin-top: 20px;
	}

	.calendar {
		border: 1px solid #000;
		margin-bottom: 10px;
		width: 30%;
	}

	.calendar-header {
		color: #fff;
		text-align: center;
	}

	.calendar-content {
		padding: 10px;
		text-align: center;
	}

	.data {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 64%;
	}
</style>